<template>
    <div>
        <!-- 头部 -->
        <a-card class="headers">
            策略搜索：
            <a-input v-model:value="name" placeholder="请输入" style="width: 200px;" />
            <a-button type="primary" style="margin-left: 10px;" @click="getdata()">
                <template #icon><SearchOutlined /></template>
                查询
            </a-button>
        </a-card>
        <!-- 表格 -->
        <a-card>
            <a-button type="primary" style="margin-bottom: 10px;" @click="showModal">
                <PlusCircleOutlined />
                新建
            </a-button>
            <a-table :columns="columns" :data-source="datas" :pagination="false">
                <template #action="{ record }">
                    <a @click="getstr(record)">详情</a>
                    <a-divider type="vertical" />
                    <a @click="put(record)">修改</a>
                    <a-divider type="vertical" />
                    <a style="color: red;" @click="deldata(record._id)" >删除</a>
                </template>
            </a-table>
        </a-card>
        <!-- 分页 -->
        <div style="margin-top: 2.5vh; margin-bottom: 4vh" v-if="total > 6">
            <span style="color: #dbe5ef; font-size: 1rem; margin-left: 1rem">
                共{{ total }}条记录&nbsp;&nbsp;第 {{ page }}/{{
                Math.ceil(total / pageSize)
                }}页
            </span>
            <span style="float: right">
                <span style="margin-right: 3vw">
                <a-button
                    style="background: #d5ddf8"
                    :disabled="page <= 1"
                    @click="onup"
                    >上一页</a-button
                >
                </span>
                <span style="margin-right: 4vw">
                <a-button
                    style="background: #d5ddf8"
                    :disabled="page >= Math.ceil(total / pageSize)"
                    @click="ondown"
                    >下一页</a-button
                >
                </span>
            </span>
            </div>
        <!-- 添加 -->
        <a-modal v-model:visible="visible" title="新增策略" :footer="null" @cancel="notOk">
            <a-form
                name="custom-validation"
                ref="formRef"
                :model="formState"
                :rules="rules"
                v-bind="layout"
                @finish="handleFinish"
                @finishFailed="handleFinishFailed"
            >
                <a-form-item label="策略名称" name="name">
                    <a-input v-model:value="formState.name" autocomplete="off" :maxlength="15" >
                        <template #suffix>
                            <span>{{formState.name.length}}/15</span>
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="策略方案" name="scheme">
                    <a-input-number v-model:value="formState.scheme" autocomplete="off" :min="1" :max="10" style="width: 100%;" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 17, offset: 7 }">
                    <a-button @click="resetForm">取消</a-button>
                    <a-button type="primary" html-type="submit" style="margin-left: 50px">确认</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
        <!-- 修改 -->
        <a-modal v-model:visible="visible2" title="修改策略" :footer="null" @cancel="notOk">
            <a-form
                name="custom-validation"
                ref="formRef"
                :model="formState"
                :rules="rules"
                v-bind="layout"
                @finish="handleFinish2"
                @finishFailed="handleFinishFailed2"
            >
                <a-form-item label="策略名称" name="name">
                    <a-input v-model:value="formState.name" autocomplete="off" :maxlength="15" >
                        <template #suffix>
                            <span>{{formState.name.length}}/15</span>
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="策略方案" name="scheme">
                    <a-input-number v-model:value="formState.scheme" autocomplete="off" :min="1" style="width: 100%;" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 17, offset: 7 }">
                    <a-button @click="resetForm">取消</a-button>
                    <a-button type="primary" html-type="submit" style="margin-left: 50px">确认</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
        <!-- 详情 -->
        <a-modal v-model:visible="visible3" title="策略详情" :footer="null" @cancel="notOk">
            <a-form
                name="custom-validation"
                ref="formRef"
                :model="formState"
                :rules="rules"
                v-bind="layout"
                @finish="handleFinish2"
                @finishFailed="handleFinishFailed2"
            >
                <a-form-item label="策略名称" name="name">
                    {{ formState.name }}}
                </a-form-item>
                <a-form-item label="策略方案" name="scheme">
                    <a-table :columns="columns" :data-source="datas" :pagination="false">
                        
                    </a-table>
                </a-form-item>
            </a-form>
            <!-- 分页 -->
            <div style="margin-top: 2.5vh; margin-bottom: 4vh" v-if="total > 6">
            <span style="color: #dbe5ef; font-size: 1rem; margin-left: 1rem">
                共{{ total }}条记录&nbsp;&nbsp;第 {{ page }}/{{
                Math.ceil(total / pageSize)
                }}页
            </span>
            <span style="float: right">
                <span style="margin-right: 3vw">
                <a-button
                    style="background: #d5ddf8"
                    :disabled="page <= 1"
                    @click="onup"
                    >上一页</a-button
                >
                </span>
                <span style="margin-right: 4vw">
                <a-button
                    style="background: #d5ddf8"
                    :disabled="page >= Math.ceil(total / pageSize)"
                    @click="ondown"
                    >下一页</a-button
                >
                </span>
            </span>
            </div>
        </a-modal>
    </div>
</template>
<script setup>
    import { ref,reactive,toRefs,onMounted } from 'vue'
    import { SmileOutlined, DownOutlined,SearchOutlined,PlusCircleOutlined } from '@ant-design/icons-vue';
    import { Form, message } from 'ant-design-vue'
    import { getstrategy,poststrategy,delstrategy,putstrategy } from '@/api/peng/strategy'

    // 头部输入
    let name = ref('')
    // 表单添加
    const formRef = ref();
    const {formState,formState2} =toRefs(reactive({
        formState:{
            name: '',
            scheme: undefined,
        },
        formState2:{}
    }));
    // 修改框控制
    const visible2 = ref(false);
    const visible3 = ref(false);
    // 表格配置
    const columns = [
        {
            title: '序号',
            dataIndex: '_id',
            key: '_id',
        },
        {
            title: '策略名称',
            dataIndex: 'name',
            key: '_id',
        },
        {
            title: '策略方案',
            dataIndex: 'scheme',
            key: '_id',
        },
        {
            title: '创建日期',
            key: '_id',
            dataIndex: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            slots: {
                customRender: 'action',
            },
        },
    ];
    // 表格内容数据
    let datas = ref([])
    // 添加控制区
    const visible = ref(false);
    const showModal = () => {
        visible.value = true;
    };
    const notOk = () => {
        resetForm()
    }
    // 添加表单控制区
    let checkAge = async (rule, value) => {
      if (!value) {
        return Promise.reject('请输入');
      }
      if (!Number.isInteger(value)) {
        return Promise.reject('请输入数字');
      }
    };
    let validatePass = async (rule, value) => {
      if (value === '') {
        return Promise.reject('请输入');
      }
    };
    const rules = {
      name: [
        {
          required: true,
          validator: validatePass,
          trigger: 'change',
        },
      ],
      scheme: [
        {
          validator: checkAge,
          trigger: 'change',
        },
      ],
    };
    const layout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 20,
      },
    };
    // 确定添加验证成功 添加数据
    const handleFinish = async values => {
        console.log(values, formState.value);
        let {data} = await poststrategy(values)
        {data.code===200 ? message.success('添加成功') : message.error('添加失败') }
        getdata()
        resetForm()
    };
    // 确定添加验证失败
    const handleFinishFailed = errors => {
      console.log('no');
    };
    // 重置关闭
    const resetForm = () => {
        formRef.value.resetFields();
        visible.value = false
        visible2.value = false
    };
    // 获取数据
    const getdata = async()=>{
        let {data} = await getstrategy(name.value,page.value,pageSize.value)
        console.log(data);
        datas.value = data.data
        total.value = data.count;
    }
    // 删除数据
    const deldata = async(id)=>{
        let {data} = await delstrategy(id)
        console.log(data);
        {data.code===200 ? message.success('删除成功') : message.error('删除失败') }
        getdata()
    }
    // 修改数据控制区
    let _id = ref('')
    const put = (val)=>{
        console.log(val);
        _id.value=val._id
        formState.value=val
        visible2.value=true
    }
    // 确定修改验证成功 修改数据
    const handleFinish2 = async values => {
        console.log(values, formState);
        values._id=_id.value
        let {data} = await putstrategy(values)
        {data.code===200 ? message.success('修改成功') : message.error('修改失败') }
        getdata()
        resetForm()
    };
    // 确定修改验证失败
    const handleFinishFailed2 = errors => {
      console.log('no');
    };
    // 分页
 // 当前页
 let page = ref(1);
// 每页条数
 let pageSize = ref(6);
 // 总数量
 let total = ref(0);
 // 上一页
 const onup = () => {
 page.value--;
 getdata()
 };
 // 下一页
 const ondown = () => {
 page.value++;
 getdata()
 };
    // 查看详情区
    const getstr = (val) =>{
        formState.value=val
        visible3.value=true
    }
    onMounted(() => {
        getdata()
    })
</script>

<style scoped>
    
</style>